<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
	<title>拍照</title>
	<style>

  </style>
</head>
<body>
  <div class="booth">
    <video id="video" width="400" height="300"></video>
    <button id='tack'> </button>
    <canvas id='canvas' width='400' height='300'></canvas>
    <img id='img' src=''>
  </div>
    <video id="video" width="400" height="300"></video>
    <button id='tack'>拍一张照片</button>
    <canvas id='canvas' width='400' name="img" height='300'></canvas>
  <!--  <img src="" id="img" name="img">-->
  <button onclick="save_pic()">保存图片</button>
 
  <script>
    var video = document.getElementById('video'), //视频显示对象
        canvas = document.getElementById('canvas'), //画布对象
        snap = document.getElementById('tack'), //拍照触发器
        img = document.getElementById('img'), //存放图片
        vendorUrl = window.URL || window.webkitURL;//本地预览对象
    //获取媒体对象，以及各个浏览器的兼容
    navigator.getMedia = navigator.getUserMedia ||
                         navagator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia;
    navigator.getMedia({
        video: true, //使用摄像头对象
        audio: false  //不适用音频
    }, function(strem){
        console.log(strem);   //调试使用
        video.src = vendorUrl.createObjectURL(strem);
        video.play();
    }, function(error) {
        //error.code
        console.log(error); //调试使用（查看错误）
    });
    //添加元素监听器
    snap.addEventListener('click', function(){
      //绘制canvas图形
      canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);
      //把canvas图像转为img图片
      img.src = canvas.toDataURL("image/png");
    });
    /**
   * 获取mimeType
   * @param  {String} type the old mime-type
   * @return the new mime-type
   */
  var _fixType = function(type) {
      type = type.toLowerCase().replace(/jpg/i, 'jpeg');
      var r = type.match(/png|jpeg|bmp|gif/)[0];
      return 'image/' + r;
  };
    //保存图片事件触发
  function save_pic(){
  //图片导出为 jpg 格式
    var type = 'jpg';
    var imgData = canvas.toDataURL(type);
    // 加工image data，替换mime type
    imgData = imgData.replace(_fixType(type),'image/octet-stream');  
    // 下载后的文件名，时间戳
    var filename = 'myPic' + (new Date()).getTime() + '.' + type;
    // download
    saveFile(imgData,filename);
  };
 /**
   * 在本地进行文件保存
   * @param  {String} data     要保存到本地的图片数据
   * @param  {String} filename 文件名
   */
  var saveFile = function(data, filename){
      //获取协议标准（不确定源是否可以使用，如果不可用或网络超时，那么该方法将会失败）
      var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      save_link.href = data;
      save_link.download = filename;
     //监听
      var event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      save_link.dispatchEvent(event);
  };


    //002.判断浏览器是否能调用摄像头
    if(navigator.getUserMedia){
      //OK
    }else{
      //NO
      alert("请更新您的浏览器才能体验这个功能喔~");
    }

  </script>
</body>
</html>